<template>
	<view>
		<!-- <view class="floating-btn d-c-c br_50" @click="jump2('/pages/day/day')">
			<u-icon name="plus" color="#fff" size="24" bold></u-icon>
		</view> -->
		<u-gap height="200rpx"></u-gap>
		<view class="nav-bar d-b-c bg-white">
			<view class="nav-item f24 flex-1 d-c-c d-c" :class="active == index ? 'active' : ''" v-for="(item, index) in tabbar" :key="index" @click="jump2(item.url)">
				<view class="iconfont f44 mb20" :class="item.icon"></view>
				<view class="">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tabbar',
	props: ['active'],
	data() {
		return {
			tabbar: [
				{
					name: '个人中心',
					icon: 'icon-wode',
					url: '/pages/index/index'
				},
				{
					name: '子女信息',
					icon: 'icon-xiaoren',
					url: '/pages/child/child'
				},
				{
					name: '报读日托',
					icon: 'icon-tushu',
					url: '/pages/day/day'
				},
				{
					name: '我的订单',
					icon: 'icon-fenlei',
					url: '/pages/order/order'
				}
			]
		};
	},
	methods: {
		jump2(url) {
			uni.reLaunch({ url });
		}
	}
};
</script>

<style scoped lang="scss">
.floating-btn {
	position: fixed;
	bottom: 180rpx;
	right: 40rpx;
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #3498db, #2ecc71);
	box-shadow: 0 10rpx 30rpx rgba(52, 152, 219, 0.4);
}
.nav-bar {
	position: fixed;
	height: 180rpx;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-shadow: 0 -5px 40rpx rgba(0, 0, 0, 0.08);
	padding: 24rpx 0;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	.nav-item {
		color: #95a5a6;
		transition: all 0.3s;
		cursor: pointer;
		padding: 10rpx 0;
		position: relative;
	}
	.active {
		color: #3498db;
	}
}
</style>
